<template>
    <transition name="Home">
        <div>
            <div class="wrap">
                <p class="leave" @click="exitLogin">退出登陆</p>
                <div class="todo-wrap">
                    <div class="title">TodoList</div>
                    <HomeInput @addTodo="(todo)=>{this.todo = todo}"/>
                    <HomeList :todos="todos"/>
                    <HomeBottom :todos="todos" :doneTodosProps="doneTodos"/>
                    <Tips :msg="tipMsg" v-show="tipIsShow"/>
                </div>
            </div>
        </div>
    </transition>
</template>

<script>
    import {mapState} from 'vuex'
    import HomeInput from '../component/HomeInput.vue'
    import HomeList from '../component/Home-List.vue'
    import HomeBottom from '../component/Home-Bottom.vue'
    import Tips from '../component/Tips.vue'

    export default {
        name:'Home-Page',
        components:{HomeInput,HomeList,HomeBottom,Tips},
        data(){
            return {
                todo:'',
            }
        },
        methods:{
            // 退出登陆
            exitLogin(){
                sessionStorage.clear()
                this.$router.push('/UserLogin')
            }
        },
        mounted() {
            this.$store.dispatch('Home/getTodo')
        },
        computed:{
            ...mapState('Home',['tipMsg','tipIsShow','todos','doneTodos'])
        }
    }
</script>

<style lang="less">
    // .todo-wrap{
    //     overflow: auto;
    // }
    .Home-enter,.Home-leave-to,.tip-enter,.tip-leave-to{
        opacity: 0;
    }

    .Home-enter-to,.Home-leave,.tip-enter-to,.tip-leave{
        opacity: 1;
    }

    .leave{
        font-size: 1.4vw;
        width: 8vw;
        background: rgba(0, 0, 0, 0.356);
        position:absolute;
        right: 4vw;
        bottom: 2.5vw;
        // height: 4vw;
        text-align: center;
        line-height:4vw;
        border-radius: 1.3vw;
        color: #fff;
        cursor: pointer;

        &:hover{
            background: #000;
        }
    }

    .todo-wrap{
        width: 60vw;
        height: 70%;
        background: #fff;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        border-radius: 1vw;
        // display: flex;
        transition: .5s;
        box-shadow: 0 0 10px 10px rgba(0, 0, 0, 0.308);
        text-align: center;

        .title{
            
            font-size: 2.4vw;
            line-height: 6vw;
            font-weight: 1000;
        }
    }
    
</style>